<template>
    <div>
        <el-card>
            <p>时间</p><br>
            <el-row>
                <el-button autofocus @click="time_flag=0">全部</el-button>
                <el-button @click="time_flag=1">昨日</el-button>
                <el-button @click="time_flag=2">最近一周</el-button>
                <el-button @click="time_flag=3">最近一月</el-button>
                <el-button @click="time_flag=4">最近三月</el-button>
                <el-button @click="time_flag=5">最近半年</el-button>&nbsp;
                <el-date-picker
                        v-model="time"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-row>
            <br>
            <el-row>
                <el-select v-model="currencyD" clearable placeholder="请选择交易币对">
                    <el-option
                            v-for="item in currency"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>&nbsp;
                <el-select v-model="sourceD" clearable placeholder="请选择交易所">
                    <el-option
                            v-for="item in source"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>&nbsp;
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-row>
        </el-card>
        <br>

        <el-table :data="tableData.slice(pageStart,pageNumber)" stripe style="width: 100%">
            <el-table-column prop="currency" label="交易对" width="140" fixed></el-table-column>
            <el-table-column prop="source" label="平台" width="140"></el-table-column>
            <el-table-column prop="sample_time" label="时间" width="160"></el-table-column>
            <el-table-column prop="amount" label="数量" width="140"></el-table-column>
            <el-table-column prop="volume" label="交易金额" width="140"></el-table-column>
            <el-table-column prop="open_" label="开盘" width="140"></el-table-column>
            <el-table-column prop="close_" label="闭盘" width="140"></el-table-column>
            <el-table-column prop="high_" label="最高" width="140"></el-table-column>
            <el-table-column prop="low_" label="最低" width="140"></el-table-column>
        </el-table>
        <br>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="tableData.length"
                @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>

    export default {
        name:'FundsStatistic',
        data() {
            return {
                time:[],
                time_flag:0,
                type:null,
                exchange:null,
                activeName:'first',
                pageStart:0,
                pageNumber:8,
                pageSize:8,
                tableData: [],
                source:[],
                currency:[],
                sourceD:null,
                currencyD:null
            }
        },
        created:function () {
            this.getData();
        },
        methods:{
            getData(){
                this.axios.get('kline_index').then((response) => {//表格数据
                    this.tableData = response.data.data;
                });
                this.axios.get('data_name').then((response) => {//筛选内容
                    this.source = response.data.data.source;
                    this.currency = response.data.data.currency;
                    console.log(this.source);
                    console.log(this.currency);
                });
            },
            changePage(num){
                this.pageStart = (num-1)*this.pageSize;
                this.pageNumber = num*this.pageSize;
            },
            search(){
                this.axios.get('kline',{
                    params:{
                        time_flag:this.time_flag,
                        begin_date:this.time[0],
                        end_date:this.time[1],
                        source:this.sourceD,
                        currency:this.currencyD
                    }
                }).then((response) => {
                    console.log(response.data);
                    this.tableData = response.data.data;
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .el-date-editor .el-range-separator{
        width: auto;
    }
    .el-pagination{
        text-align: center;
    }

</style>
